<script setup>
import { onUpdated, onMounted, onBeforeUpdate, onBeforeMount, ref } from 'vue';


onMounted(() => {
    console.log('app10 mounted');
    console.log('s1:', s1);
});
onBeforeMount(() => {
    console.log('app10 before mount');
    let s1 = document.getElementById('s1');
    console.log('s1:', s1);
});
onBeforeUpdate(() => {
    console.log('app10 before update');
    let s1 = document.getElementById('s1');
    console.log('s1:', s1.innerText);
});
onUpdated(() => {
    console.log('app10 updated');
    let s1 = document.getElementById('s1');
    console.log('s1:', s1.innerText);
});

let message = ref('1');

</script>


<template>
    <div id="s1">
        message:{{ message }} <br>
    </div>
    <button v-on:click="message++">增加</button>
</template>


<style scoped></style>